<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="告警规则" name="rule">
        <AlarmRule />
      </el-tab-pane>
      <el-tab-pane label="告警记录" name="record">
        <AlarmRecord />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AlarmRule from './rule/index.vue'
import AlarmRecord from './record/index.vue'

export default {
  name: "AlarmIndex",
  components: {
    AlarmRule,
    AlarmRecord
  },
  data() {
    return {
      activeTab: 'rule'
    }
  },
  methods: {
    handleTabClick(tab) {
      // 可以在这里处理tab切换逻辑
      console.log('当前选中tab:', tab.name)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 